<template>
	<view class="genepair">
		<view class="pairbg">
			<image class="pairbgimg" :src="photo_cdn+'/zpupload/static/gene/pairbg.png'" ></image>
		</view>
		<view class="genepair_body">
			<view class="prompt jus-e">
				<view class="prompt_icon flexc">!</view>
				<view class="prompt_text">原理解释</view>
			</view>
			<view class="genepair_tistext">
				<view class="genepair_title">天生一对指数</view>
				<view class="genepair_content">基因检测匹配可以在一定范围内精准、高效的从先天匹配角度为你寻找那个TA。你和TA的匹配度越高，则说明基因契合度越高哦~</view>
			</view>
			
			<view class="genepair_tabs flex jus-a">
				<view class="tabs_item" @tap="taggletab(1)" :class="{actices:tabactive==1}">
					<view class="tabs_itemtext">匹配池</view>
					<image v-show="tabactive==1" class="pulseicon":src="photo_cdn+'/zpupload/static/gene/pulseicon.png'" mode=""></image>
				</view>
				<view class="tabs_item" @tap="taggletab(2)" :class="{actices:tabactive==2}">
					<view class="tabs_itemtext">计算器</view>
					<image v-show="tabactive==2" class="pulseicon" :src="photo_cdn+'/zpupload/static/gene/pulseicon.png'" mode=""></image>
				</view>
				<view class="tabs_item" @tap="taggletab(3)" :class="{actices:tabactive==3}">
					<view class="tabs_itemtext">匹配记录</view>
					<image v-show="tabactive==3" class="pulseicon" :src="photo_cdn+'/zpupload/static/gene/pulseicon.png'" mode=""></image>
				</view>
				
				
			</view>
			
			<!-- 配对池 -->
			<view v-show="tabactive==1" class="tabbarinfo">
				<view class="tastextborder flex ali-c jus-c">
					<view class="tastext">个人资料越完善，越受大家的欢迎哦 </view>
					<view class="tastext2">去完善 ></view>
					<image class="closeicons" :src="photo_cdn+'/zpupload/static/gene/close.png'" mode=""></image>
				</view>
				<scroll-view class="pair_listscrool" scroll-y	>
					<view class="pair_list">
						<view class="pair_item flex ali-c jus-b" v-for="(item,index) in 10" :key="index">
							<view class="pair_item_l flex ali-c" >
								<image class="pari_user_tx" src="https://p.qqan.com/up/2023-12/20231228823534544.jpg" mode=""></image>
								<view class="uuinfodata">
									<view class="uunames">你号(**武)</view>
									<view class="uutaginfo ali-c" :class="{uutaginfo1:index==1}">
										<image class="ageicon" v-if="index==1" :src="photo_cdn+'/zpupload/static/gene/age2.png'" mode=""></image>
										<image class="ageicon" v-else :src="photo_cdn+'/zpupload/static/gene/age1.png'" mode=""></image>
										<text class="gaes">23岁</text>
									</view>
										
								</view>
							</view>
							<view class="pair_item_r">
								<view class="computebtn">计算</view>
								<view class="livelys">3分钟前活跃</view>
							</view>
						</view>
					</view>
				</scroll-view>
				
			</view>
			
			<!-- 计算器 -->
			<view class="calculator" v-show="tabactive==2">
				<view class="calculator_border flex ali-c jus-c">
					<view class="select_user">
						<view class="select_user_tx flexc">
							<image class="uu_tx" src="https://p.qqan.com/up/2023-12/20231228823534544.jpg" mode=""></image>
						</view>
						<view class="identity">你</view>
					</view>
					<view class="select_center">
						<image class="pulseicon" :src="photo_cdn+'/zpupload/static/gene/pulseicon.png'" mode=""></image>
					</view>
					<view class="select_user">
						<view class="select_user_tx flexc">
							<view class="addbtns flexc">
								<image class="addbtnsimg" :src="photo_cdn+'/zpupload/static/gene/addbtns.png'" mode=""></image>
							</view>
						</view>
						<view class="identity">邀请好友</view>
					</view>
				</view>
				<view class="start_calcu">开始计算</view>
			</view>
			
			<!-- 匹配记录 -->
			<view class="pairlogs" v-show="tabactive==3">
				<view class="pairlogs_screen flex ali-c">
					<view class="screentags">
						<text class="tts">匹配时间</text>
						<image class="sortdown" :src="photo_cdn+'/zpupload/static/gene/sortdown.png'" mode=""></image>
					</view>
					<view class="screentags">
						<text class="tts">全部性别</text>
						<image class="sortdown" :src="photo_cdn+'/zpupload/static/gene/sortdown.png'" mode=""></image>
					</view>
				</view>
				<view class="pairlogs_data">
					<!-- .... -->
				</view>
				<view class="nopairlog">
					<image class="nopairlogimg" :src="photo_cdn+'/zpupload/static/gene/nopairlog.png'" mode=""></image>
					<view class="nopairlogtext">暂无匹配记录</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import config from "@/utils/config.js";
	let {photo_cdn} = config.baseUrl;
	export default {
		data(){
			return {
				tabactive:3,
				photo_cdn
			}
		},
		methods:{
			//切换tab
			taggletab(tab){
				this.tabactive = tab;
			}
		}
	}
</script>

<style lang="scss">
	@import "./genepair.scss";
</style>